<template>
  <a-drawer
    title="分配"
    width="90%"
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-card :bordered="false">
      <h3>选择一个用户分配客户组</h3>
      <div>
        组织机构 :
        <a-tree-select
          style="min-width: 220px"
          @change="Department($event)"
          allowClear
          :treeData="DepartmentIdTreeData"
          placeholder="请选择组织机构"
          treeDefaultExpandAll
          v-model="DepartmentId"
        ></a-tree-select>
        人员 :
        <a-select allowClear v-model="allowSelect" @change="changeUser" style="min-width: 220px">
          <a-select-option v-for="item in User" :key="item.Id" :value="item.Id">
            {{ item.RealName }}
          </a-select-option>
        </a-select>
      </div>
      <!-- id="transfer"
        @scroll="scrollFn" -->
      <a-transfer
        style="margin-top: 8px"
        show-search
        :filter-option="filterOption"
        :list-style="{
          width: '640px',
          height: '550px'
        }"
        :data-source="mockData"
        :target-keys="targetKeys"
        :render="item => item.title"
        @change="TargetKeysChange"
      >
      </a-transfer>
    </a-card>
    <div style="height: 50px"></div>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="visible = false">取消</a-button>&nbsp;&nbsp;
      <a-button type="primary" :loading="btnLoading" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
export default {
  props: {
    parentObj: Object
  },
  data () {
    return {
      btnLoading: false,
      allowSelect: '',
      User: [],
      visible: false,
      DepartmentId: '',
      SalesmanId: [],
      SalesmanName: '',
      entity: {},
      DepartmentIdTreeData: [],
      show: false,
      targetKeys: [],
      mockData: [],
      pagination: {
        current: 1,
        pageSize: 100,
        total: null
      },
      Type: '1',
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      SalesmanType: ''
    }
  },
  mounted () {
    this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
      if (resJson.Success) {
        this.DepartmentIdTreeData = resJson.Data
      }
    })
  },
  methods: {
    scrollFn (direction, event) {
      if (direction === 'left') {
        // 滚动条位置 + 盒子高度 + 距离底部距离 > 滚动条总高     进行加载
        if (event.path[0].scrollTop + event.path[0].clientHeight + 100 > event.path[0].scrollHeight) {
          this.pagination.current++
        }
      }
    },
    handleSubmit () {
      if (!this.allowSelect) return this.$message.error('请选择人员')
      this.btnLoading = true
      var entityData = {}
      entityData.SalesmanId = this.allowSelect
      entityData.GroupIds = this.targetKeys

      entityData.SalesmanName = this.SalesmanName
      // entityData.SalesmanType = this.SalesmanType
      this.$http
        .post('/CustomerManagement/Cust_GroupAllocationOfUser/SaveDataOfMoreGroup', entityData)
        .then(resJson => {
          this.loading = false
          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.visible = false

            this.parentObj.getDataList()
            this.targetKeys = []
          } else {
            this.$message.error(resJson.Msg)
          }
          setTimeout(() => {
            this.btnLoading = false
          }, 500)
        })
    },
    changeType (e) {
      this.pagination = {
        current: 1,
        pageSize: 100,
        total: null
      }
      this.mockData = []
      this.targetKeys = []
      this.getmockDataList()
    },
    changeUser (e) {
      if (e) {
        const Userid = this.User.findIndex(item => item.Id === e)
        if (Userid !== -1) {
          this.SalesmanName = this.User[Userid].RealName
        }
        // 调用接口获取已分配客户
        this.$http
          .post('/CustomerManagement/Cust_GroupAllocationOfUser/GetDataList', {
            Search: {
              Condition: 'SalesmanId',
              Keyword: e
            }
          })
          .then(res => {
            if (res.Success) {
              this.targetKeys = res.Data.map(item => item.GroupId)
            }
          })
      } else {
        this.allowSelect = ''
        this.targetKeys = []
      }
    },
    init () {
      this.pagination = {
        current: 1,
        pageSize: 100,
        total: null
      }
      // 获取组织
      this.DepartmentId = ''
      this.SalesmanType = ''
      this.mockData = []
      this.getUserGrouping()
      this.btnLoading = false
      this.allowSelect = ''
      this.User = []
      this.targetKeys = []
    },
    openForm () {
      this.init()
      this.visible = true
    },
    Department (e) {
      this.allowSelect = ''
      this.User = []
      this.targetKeys = []
      this.UserList(e)
    },
    UserList (e) {
      this.$http.post('/Base_Manage/Base_User/GetDataListAsyncByDeptId?DeptId=' + e).then(resJson => {
        if (resJson.Success) {
          this.User = resJson.Data
        }
      })
    },
    // 分配
    TargetKeysChange (targetKeys, direction, moveKeys) {
      this.targetKeys = targetKeys
    },
    filterOption (inputValue, option) {
      return option.title.indexOf(inputValue) > -1
    },
    getUserGrouping () {
      this.$http.post('/CustomerManagement/CustomerGroup/GetDataList', {}).then(res => {
        this.mockData = res.Data
        this.mockData.forEach(item => {
          item.title = item.GroupName
          item.key = item.Id
          item.description = item.GroupName
        })
      })
    }
  }
}
</script>

<style scoped>
.Mbottom {
  margin-bottom: 8px;
}

.weight {
  font-weight: bold;
}
</style>
